<template>
  <div class="template-list">
    <div class="template-item" v-for="item in templateList" :key="item._id">
      <a-card hoverable class="card">
        <template #cover>
          <div class="img">
            <img :src="item.coverImg" v-if="item.coverImg !== 'test'" />
            <img
              v-else
              src="../../assets/zwtp.jpg"
              :style="{ height: '100%' }"
            />
            <div class="cover">
              <a-button type="primary" @click="goEditor(item._id)"
                >继续编辑该作品</a-button
              >
            </div>
          </div>
        </template>
        <a-card-meta :title="item.title" />
        <template #actions>
          <edit-outlined key="edit" @click="goEditor(item._id)" />
          <a-dropdown>
            <ellipsis-outlined key="ellipsis" />
            <template #overlay>
              <a-menu>
                <a-menu-item @click="deleteWorkHandle(item._id)">
                  <DeleteOutlined /> 删除
                </a-menu-item>
                <a-menu-item
                  @click="downLoadCoverImage(item.coverImg, item.title)"
                >
                  <DownloadOutlined /> 下载图片
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-card>
      <div class="tag-list">
        <a-tag color="orange" v-if="item.isPublic"> 已发布 </a-tag>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TemplateItem } from '@/views/templateList/type'
import { createVNode } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue'
import {
  DeleteOutlined,
  EditOutlined,
  EllipsisOutlined,
  DownloadOutlined,
} from '@ant-design/icons-vue'
import { downLoadFile } from '@/helper'
import { deleteWorkAPI } from '@/request/modules/work'
defineOptions({
  name: 'WorkTemplateList',
})
export interface IWorkTemplateList extends TemplateItem {
  isPublic: boolean
  isTemplate: boolean
}
export interface IWorkTemplateListProps {
  templateList: IWorkTemplateList[]
}
const props = withDefaults(defineProps<IWorkTemplateListProps>(), {})
const emits = defineEmits(['onDelete'])
const router = useRouter()
const goEditor = (id: string) => {
  router.push(`/editor/${id}`)
}
const deleteWorkHandle = (id: string) => {
  console.log('delete', id)
  Modal.confirm({
    title: '警告',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确定删除该作品吗？',
    async onOk() {
      await deleteWorkAPI(id)
      message.success('删除成功')
      emits('onDelete')
    },
    onCancel() {
      console.log('Cancel')
    },
    class: 'test',
  })
}
const downLoadCoverImage = (url: string, fileName: string) => {
  downLoadFile(url, fileName)
}
</script>

<style scoped lang="scss">
.template-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  .template-item {
    margin: 10px;
    width: 280px;
    position: relative;
    .card {
      width: 280px;
      :deep(.ant-card-body) {
        padding: 20px;
      }
      .img {
        width: 100%;
        height: 380px;
        position: relative;
        overflow: hidden;
        border-radius: 8px 8px 0 0;
        img {
          width: 100%;

          transition: all 0.3s ease-in-out;
        }
        .cover {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          opacity: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all 0.3s ease-in-out;
          button {
            border-radius: 20px;
          }
        }
        &:hover {
          .cover {
            opacity: 1;
          }
          img {
            transform: scale(1.2);
          }
        }
      }
      .descriptions {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .tag-list {
    position: absolute;
    top: -4px;
    left: -6px;
  }
}
</style>
